<!-- 支付密码 -->
<template>
	<view class="p-container">
    <t-header @back="clickNavBackFn">支付密码</t-header>
		<!-- content -->
		<view class="p-content">
			<tui-form ref="payRef">
				<view class="page">
					<view style="margin-bottom: 22rpx; color: #000000; font-size: 56rpx; font-weight: 400; font-family: PingFangSC, PingFang SC;">
						设置支付密码
					</view>
					<view style="margin-bottom: 94rpx; color: #F74E51; font-size: 36rpx; font-weight: 400; font-family: PingFangSC, PingFang SC;">
						{{step==1?'请输入新密码':(step==0?'请输入旧密码':'请再次输入新密码')}}
					</view>
					<view class="">
						<tui-keyboard-input :inputvalue="pwdArr"></tui-keyboard-input>
					</view>
					<view style="height: 30vh;"></view>
					<tui-keyboard :mask="false" :show="show" @close="closeKeyboard" @click="keyboardClick">
					</tui-keyboard>
				</view>
			</tui-form>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue';

import THeader from '@/components/views/t-header/index.vue'; // 头部组件

// api
import {editPass, checkOldpay} from '@/api/user.js';

const payRef = ref(null);
const show = ref(true);
const step = ref(0);
const formData = ref({
	password: '',
	confimpassword: ''
});
const pwd = ref(["", "", "", "", "", ""]);
const pwdArr = ref(["", "", "", "", "", ""]);

// 点击返回
const clickNavBackFn = () => {
	const pages = getCurrentPages();
	if (pages.length >= 2) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
};

const closeKeyboard = () => {
	show.value = false
};

const keyboardClick = (e) => {
	console.log(e.index)
	if (e.index == 11) {
		let lastIndex = pwdArr.value.lastIndexOf('●');
		if (lastIndex != -1) {
			pwdArr.value[lastIndex] = '';
			pwd.value[lastIndex] = '';
		}
	} else if (e.index == 9) {
		uni.navigateBack()
		return
	} else {
		let emptyIndex = pwdArr.value.findIndex(v => v == '')
		console.log("emptyIndex", emptyIndex)
		let num = e.index < 10 ? (e.index + 1) : 0;
		// console.log(num)
		if (emptyIndex != -1) {
			pwdArr.value[emptyIndex] = '●';
			pwd.value[emptyIndex] = num;
		}
		console.log(pwd.value)
	}
	let noEmpty = pwd.value.filter(v => v !== '')
	console.log(noEmpty.length)
	if (noEmpty.length == 6) {
		if(step.value == 0){
			let old_pay_pass = noEmpty.join('')
			// console.log(old_pay_pass)
			checkOldpay({paypass:old_pay_pass})
			.then(res=>{
				// console.log(res)
				pwd.value = ["", "", "", "", "", ""],
				pwdArr.value = ["", "", "", "", "", ""]
				if(res.code == 0){
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					return false;
				}
				step.value = 1
			})
		}
		if (step.value == 1) {
			formData.value.password = noEmpty.join('')
			pwd.value = ["", "", "", "", "", ""],
			pwdArr.value = ["", "", "", "", "", ""]
			step.value = 2
			return false;
		} 
		if (step.value == 2){
			formData.value.confimpassword = noEmpty.join('')
			let rules = [{
					name: 'password',
					rule: ['required'],
					msg: ['请输入支付密码']
				},
				{
					name: 'confimpassword',
					rule: ['required', 'isSame:password'],
					msg: ['请确认支付密码', '两次密码不一致']
				},
			]
			console.log(formData.value)
			payRef.value.validate(formData.value, rules).then(checkRes => {
				console.log(checkRes.isPass)
				if (checkRes.isPass) {
					editPass(formData.value).then(res => {
						if (res.code == 1) {
							uni.showModal({
								content: res.msg,
								success() {
									uni.navigateBack()
								}
							})
							// this.tui.modal(null, res.msg, false, () => {
							// 	uni.navigateBack()
							// })
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: checkRes.msg
					})
					console.log(checkRes.msg)
				}
			})

		}
	}
};
</script>

<style lang='scss' scoped>
.p-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #fff;
	box-sizing: border-box;

	.p-content {
		flex: 1;
		padding: 0 18rpx 26rpx;
		
		.page {
			display: flex;
			flex-direction: column;
			justify-content: end;
			align-items: center;
			
			min-height: calc(100vh - 21rem);
			background: #fff;
			box-sizing: border-box;
		}
	}
}
</style>
